<template>
  <div class="attr-item">
    <div class="attr-item-label">
      <template v-if="isHasExpand">
        <div class="expand-icon" v-if="curResult" @click="onChangeExpand">
          <Icon icon="ant-design:caret-right-outlined" v-if="!isExpand" />
          <Icon icon="ant-design:caret-down-outlined" v-if="isExpand" />
        </div>
      </template>

      <span>{{ title }}</span>
    </div>
    <div class="attr-item-value">
      <a-switch v-model:checked="curResult" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'BwNodeAttrsConstConfigSwitch',
  props: {
    title: {
      type: String,
    },
    value: {
      type: Boolean,
    },
    /** 是否有展开功能 */
    isHasExpand: {
      type: Boolean,
    },
    isExpand: {
      type: Boolean,
    },
    /** 默认值 */
    defaultValue: {
      type: Boolean,
    },
  },
  emits: ['update:value', 'change', 'update:isExpand'],
  setup(props, { emit }) {
    /** 对象值 */
    const curResult = computed({
      get: (): boolean | undefined => {
        return props.value ?? props.defaultValue
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    const onChangeExpand = () => {
      emit('update:isExpand', !props.isExpand)
    }

    return { curResult, onChangeExpand }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  display: flex;
  align-items: center;
  padding: 8px;

  .attr-item-label {
    width: 90px;
    text-align: left;
    display: flex;

    .expand-icon {
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  .attr-item-value {
    flex: 1;
  }

  .required:after {
    color: red;
    content: '*';
  }
}
</style>
